<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>DOM 断点演示</title>
    <style>
        .container {
            padding: 20px;
            margin: 10px;
            border: 1px solid #ccc;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>DOM 断点演示</h1>

    <!-- 子树修改断点演示 -->
    <div class="container" id="subtree-demo">
        <h2>子树修改断点演示</h2>
        <div id="parent">
            <p>这是初始内容</p>
        </div>
        <button id="clickBtn">修改子树内容</button>
    </div>

    <!-- 属性修改断点演示 -->
    <div class="container" id="attribute-demo">
        <h2>属性修改断点演示</h2>
        <div id="style-target">
            这个元素的样式将被修改
        </div>
        <button onclick="modifyAttribute()">修改样式</button>
    </div>

    <!-- 节点移除断点演示 -->
    <div class="container" id="remove-demo">
        <h2>节点移除断点演示</h2>
        <div id="remove-target">
            这个元素将被移除
        </div>
        <button onclick="removeNode()">移除节点</button>
    </div>

    <script>
        // 子树修改示例
        document.getElementById('clickBtn').addEventListener('click', function() {
            const parent = document.getElementById('parent');
            parent.innerHTML = '<p>内容已被修改！</p>';
        });


        // 属性修改示例
        function modifyAttribute() {
            const target = document.getElementById('style-target');
            target.classList.toggle('highlight');
        }

        // 节点移除示例
        function removeNode() {
            const target = document.getElementById('remove-target');
            if (target) {
                target.remove();
            }
        }
    </script>
</body>
</html> 